<template>
  <div>
    <div v-if="basicData" style="padding-bottom: 1px">
      <el-divider content-position="left">
        <div class="divider-content">
          <span style="margin-right: 20px">
            表资产基础信息
          </span>
          <el-button v-if="!basicDataFlag" type="text" @click="basicDataFlag=true">展开</el-button>
          <el-button v-else type="text" @click="basicDataFlag=false">收起</el-button>
        </div>
      </el-divider>
      <el-descriptions v-if="basicDataFlag" :column="24" border>
        <el-descriptions-item :span="8" label="ID">{{ basicData.id }}</el-descriptions-item>
        <el-descriptions-item :span="8" label="全限定名">{{ basicData.qualifiedName }}</el-descriptions-item>
        <el-descriptions-item :span="8" label="阶段">{{ basicData.stage }}</el-descriptions-item>
        <el-descriptions-item :span="8" label="属性类型">{{ basicData.attributeType }}</el-descriptions-item>
        <el-descriptions-item :span="8" label="创建时间">
          {{
            basicData.createTime | transformDateFormat
          }}
        </el-descriptions-item>
        <el-descriptions-item :span="8" label="更新时间">
          {{
            basicData.updateTime | transformDateFormat
          }}
        </el-descriptions-item>
        <el-descriptions-item v-if="basicData.address" :label="'地址'" :span="24">
          <span>实例类型: {{ basicData.address.type }}</span><br>
          <span>实例名称: {{ basicData.address.instanceName }}</span><br>
          <span>协议前缀: {{ basicData.address.protocol }}</span><br>
          <span>地址: {{ basicData.address.address }}</span><br>
          <span>路径: {{ basicData.address.path }}</span><br>
          <span>来源类型: {{ basicData.address.sourceType }}</span><br>
          <span>用途: {{ basicData.address.usage }}</span><br>
        </el-descriptions-item>
        <el-descriptions-item :span="24" label="调度脚本">{{ schedulerScript }}</el-descriptions-item>
      </el-descriptions>
    </div>

  </div>
</template>

<script>
import {scheduleDate} from "@/views/test/sqlDrawer/schedule.json"

export default {
  name: "AssetInfoBasicInfoDiv",
  props: {
    basicData: {type: Object, default: null},
    sourceData: {type: Array, default: null},
    targetData: {type: Array, default: null},
    schedulerData: {type: Array, default: null},
  },

  data() {
    return {
      schedulerScript: null,
      tableInfo: {
        owner: {},
        samples: []
      },
      samples: [],
      tableColumns: [],
      basicDataFlag: true,
      demandFlag: false,
      samplesFlag: false,
      tableInfoFlag: false,
      sourceAssetsFlag: false,
      targetAssetsFlag: false,
      schedulerAssetsFlag: false,
      componentAccountFlag: false,
    }
  },
  watch: {
    'basicData': {
      handler(val) {
        this.tableInfo = val.tableInfo
        this.tableColumns = []

        this.schedulerScript = scheduleDate.submitDolphinBdtee.scriptContent
      }, immediate: false
    }
  },
  methods: {
    init() {
      this.basicDataFlag = false;
      this.samplesFlag = false;
      this.schedulerAssetsFlag = false;
      this.tableInfoFlag = false;
      this.sourceAssetsFlag = false;
    }
  },
}
</script>

<style>
.divider-content {
  display: flex;
  align-items: center;
}
</style>
